<template>
  <div id="movie-tab">
      <ul>
          <router-link tag="li" class="font-color" to="/movie/city">
          北京<i class="fa fa-caret-down"></i>
          </router-link>
          <router-link tag="li" class="font-color" to="/movie/now">
              正在热映
          </router-link>
          <router-link tag="li" class="font-color" to="/movie/comming">
              即将上映
          </router-link>
          <router-link tag="li" class="font-color" to="/movie/search">
              <i class="fa fa-search"></i>
          </router-link>
      </ul>
      <keep-alive>
      <router-view></router-view>
      </keep-alive>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
    #movie-tab{
        padding-top: 50px;
        padding-bottom: 38px;
    }
    ul{
        border-bottom: 1px solid #ccc;
    }
    li{
        display: inline-block;
        width: 25%;
        text-align: center;
        height: 40px;
        line-height: 40px;
        font-weight: bold;
    }
   
    .font-color{
        color:#666
    }
    .fa-caret-down{
        margin-left: 5px;
    }
    .fa-search{
        font-size: 25px;
        color: #E54847;
    }
     .router-link-active{
        color: #E54847;
        border-bottom: 2px solid #E54847;
    }
</style>